<template>
	<div>
		<!-- 头部 -->
		<div class="disease-list" v-if="current === 0">
			<div class="list" v-for="(item, index) in careDiseaseList" :key="index" @click="to('/pages/CommunityPages/circleDetails/main?id=' + item.id)">
				<img class="img" :src="item.iconUrl || '/static/images/ic_img.png'" />
				<p class="name">{{ item.groupName }}</p>
			</div>
			<div class="list" @click="to('/pages/CommunityPages/circle/main')">
				<image class="img" src="/static/images/mored.png"></image>
				<p class="name">更多</p>
			</div>
		</div>

		<div class="disease-list" v-if="current != 0 && current != 4">
			<div class="list" v-for="(item, index) in diseaseList" :key="index" @click="to('/pages/CommunityPages/circleDetails/main?id=' + item.id)">
				<img class="img" :src="item.iconUrl || '/static/images/ic_img.png'" />
				<p class="name">{{ item.groupName }}</p>
			</div>
			<div class="list" @click="to('/pages/CommunityPages/circle/main')">
				<image class="img" src="/static/images/mored.png"></image>
				<p class="name">更多</p>
			</div>
		</div>

		<!-- 标题 -->
		<div class="title-box" v-if="current < 4">
			<image class="img" src="/static/images/ic_guess.png"></image>
			<p class="title">{{ current === 0 ? '我的关注' : '猜你感兴趣' }}</p>
		</div>

		<!-- 提示 -->
		<div class="warning" v-if="current < 4">
			<text>温馨提示：</text>
			<text>疾病圈所有内容仅供参考，部分症状图可能引起不适，请自行选择查看！</text>
		</div>

		<!-- 我的互助 -->
		<my-help v-if="current == 4"></my-help>
		<!-- 我的帖子 -->
		<div class="post-list" v-else-if="current === 0">
			<div class="list" v-for="(item, index) in myPostList" :key="index" @click="to('/pages/CommunityPages/details/main?id=' + item.id)">
				<div class="top">
					<div><image class="avatar" :src="item.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image></div>
					<div class="name-box">
						<p class="name">{{ item.nickName || '' }}</p>
						<p class="time">{{ item.createTime }}</p>
					</div>
					<div class="solution" v-if="item.helpStatus == 1">已解决</div>
				</div>
				<div v-if="item.recourseAmount > 0" class="reward">悬赏{{ item.recourseAmount }}积分</div>
				<div class="content-box">
					<text class="good" v-if="item.publishStatus == 2">精</text>
					<text class="stick" v-if="item.publishStatus == 1">顶</text>
					<text class="ask" v-if="item.publishType == 1">问</text>
					<text v-if="item.publishSubject" class="title">【{{ item.publishSubject }}】</text>
					<text class="content">{{ item.publishContent || '' }}</text>
				</div>
				<div v-if="item.showImage" class="img-box" @click.stop><img class="img" v-for="(x, y) in item.imgs" :key="y" :src="x" @click="preview(x, item.imgs)" /></div>
				<view class="btn-primary" v-if="item.imgs.length > 0" @click.stop="changeImageStatus(index)">{{ item.showImage ? '隐藏图片' : '查看图片' }}</view>
				<view class="btn-primary" v-if="item.videoUrl" @click.stop="playVideo(item)">播放视频</view>
				<div class="bottom">
					<div class="disease" @click.stop="to('/pages/CommunityPages/circleDetails/main?id=' + item.groupId)">{{ item.groupName }}</div>
					<div class="right-box">
						<div class="operation">
							<image class="icon" src="/static/images/ic_comment.png"></image>
							<p class="count">{{ item.commentsAmount || 0 }}</p>
						</div>
						<div class="operation">
							<image class="icon" src="/static/images/ic_like.png"></image>
							<p class="count">{{ item.collectQuantity || 0 }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 帖子列表 -->
		<div class="post-list" v-else>
			<div class="list" v-for="(item, index) in postList" :key="index" @click="to('/pages/CommunityPages/details/main?id=' + item.id)">
				<div class="top">
					<div><image class="avatar" :src="item.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image></div>
					<div class="name-box">
						<p class="name">{{ item.nickName || '' }}</p>
						<p class="time">{{ item.createTime }}</p>
					</div>
					<div class="solution" v-if="item.helpStatus == 1">已解决</div>
				</div>
				<div v-if="item.recourseAmount > 0" class="reward">悬赏{{ item.recourseAmount }}积分</div>
				<div class="content-box">
					<text class="good" v-if="item.publishStatus == 2">精</text>
					<text class="stick" v-if="item.publishStatus == 1">顶</text>
					<text class="ask" v-if="item.publishType == 1">问</text>
					<text v-if="item.publishSubject" class="title">【{{ item.publishSubject }}】</text>
					<text class="content">{{ item.publishContent || '' }}</text>
				</div>
				<div v-if="item.showImage" class="img-box" @click.stop><img class="img" v-for="(x, y) in item.imgs" :key="y" :src="x" @click="preview(x, item.imgs)" /></div>
				<view class="btn-primary" v-if="item.imgs.length > 0" @click.stop="changeImageStatus(index)">{{ item.showImage ? '隐藏图片' : '查看图片' }}</view>
				<view class="btn-primary" v-if="item.videoUrl" @click.stop="playVideo(item)">播放视频</view>
				<div class="bottom">
					<div class="disease" @click.stop="to('/pages/CommunityPages/circleDetails/main?id=' + item.groupId)">{{ item.groupName }}</div>
					<div class="right-box">
						<div class="operation">
							<image class="icon" src="/static/images/ic_comment.png"></image>
							<p class="count">{{ item.commentsAmount || 0 }}</p>
						</div>
						<div class="operation">
							<image class="icon" src="/static/images/ic_like.png"></image>
							<p class="count">{{ item.collectQuantity || 0 }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import MyHelp from './MyHelp.vue';
export default {
	components: {
		MyHelp
	},
	props: {
		current: Number,
		postList: Array,
		diseaseList: Array,
		myPostList: Array,
		careDiseaseList: Array
	},
	methods: {
		to(url) {
			this.$emit('to', url);
		},
		preview(current, imgList) {
			this.$Imgpreview(current, imgList);
		},
		changeImageStatus(index) {
			this.$emit('changeStatus', index);
		},
		playVideo(item) {
			uni.navigateTo({
				url: '/pages/CommunityPages/video/video?src=' + encodeURIComponent(item.videoUrl)
			});
		}
	}
};
</script>

<style lang="scss">
.disease-list {
	padding: 15rpx;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;

	.list {
		margin: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		width: 104rpx;

		&:nth-child(5n) {
			margin-right: 0;
		}

		.img {
			width: 80rpx;
			height: 80rpx;
		}

		.name {
			margin-top: 20rpx;
			width: 100%;
			font-size: 26rpx;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.title-box {
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	align-content: center;
	background-color: #fff;

	.img {
		width: 30rpx;
		height: 30rpx;
	}

	.title {
		margin-left: 15rpx;
		font-size: 26rpx;
	}
}

.warning {
	width: 100%;
	padding: 20rpx 30rpx;
	background: #f9edda;
	font-size: 26rpx;

	text:nth-child(1) {
		color: #dd1d1a;
	}

	text:nth-child(2) {
		color: #e6b664;
	}
}

.post-list {
	padding: 0 30rpx;
	box-sizing: border-box;
	background-color: #fff;

	.list {
		padding: 20rpx 0;
		box-sizing: border-box;
		border-top: 1px solid #f8f8f8;

		.top {
			position: relative;
			display: flex;
			align-items: center;
			align-content: center;

			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.name-box {
				margin-left: 15rpx;
				display: flex;
				align-items: center;
				align-content: center;
				flex-direction: column;

				.name {
					width: 100%;
					font-size: 28rpx;
					text-align: left;
				}

				.time {
					margin-top: 5rpx;
					color: #aaa;
					font-size: 24rpx;
				}
			}

			.solution {
				position: absolute;
				right: 0;
				color: #ff290b;
				font-size: 26rpx;
				font-weight: bold;
				transform: rotate(45deg);
			}
		}

		.reward {
			margin: 5rpx 0;
			font-size: 28rpx;
			color: #e5ae54;
		}

		.content-box {
			.ask {
				margin-right: 5rpx;
				padding: 0 5rpx;
				color: #f83f06;
				font-size: 24rpx;
				border: 1rpx solid #f83f06;
				background-color: #fff3f4;
				border-radius: 5rpx;
			}

			.stick {
				margin-right: 5rpx;
				padding: 0 5rpx;
				color: #1dda61;
				font-size: 24rpx;
				border: 1rpx solid #1dda61;
				background-color: #e6f9ed;
				border-radius: 5rpx;
			}

			.good {
				margin-right: 5rpx;
				padding: 0 5rpx;
				color: #07a0f8;
				font-size: 24rpx;
				border: 1rpx solid #07a0f8;
				background-color: #e7f4fb;
				border-radius: 5rpx;
			}

			.title {
				color: #333333;
				font-size: 30rpx;
			}

			.content {
				color: #333333;
				font-size: 32rpx;
			}
		}

		.img-box {
			display: flex;
			flex-wrap: wrap;

			.img {
				margin: 10rpx 10rpx 0 0;
				width: 222rpx;
				height: 222rpx;
				border-radius: 10rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-between;

			.disease {
				padding: 10rpx 25rpx;
				color: #f48712;
				font-size: 26rpx;
				border-radius: 30rpx;
				background-color: #fef5ee;
			}

			.right-box {
				display: flex;
				align-items: center;
				align-content: center;

				.operation {
					display: flex;
					align-items: center;
					align-content: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
					}

					.count {
						margin-left: 8rpx;
						font-size: 24rpx;
					}

					&:last-child {
						margin-left: 30rpx;
					}
				}
			}
		}
	}
}

.btn-primary {
	height: 60rpx;
	width: 200rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	line-height: 60rpx;
	text-align: center;
	background: #32C59A;
	color: #ffffff;
	font-size: 28rpx;
	border-radius: 100rpx;
}
</style>
